<template>
	<div class="bisai flex">
    <left></left>
    <div style="width: calc(100vw - 280px); height: calc(100vh - 40px); overflow: auto; padding: 20px;">
      <div style="margin-bottom: 20px;"><el-button @click="add" type="primary">新增比赛</el-button></div>
      <div class="flexc" style="margin-bottom: 20px;">
        <div>
          <el-input v-model="search.name" style="width: 250px; " placeholder="请输入比赛名称"></el-input>
        </div>
        <el-button type="primary" round style="margin-left: 20px;">搜索</el-button>
      </div>
      <el-table :data="tableData"  border  style="width: 100%">
          <el-table-column prop="name" label="比赛名称"></el-table-column>
          <el-table-column prop="date" label="比赛地点">
            <template slot-scope="scope">
              {{scope.row.province}}{{scope.row.city}}{{scope.row.district}}
            </template>
          </el-table-column>
          <el-table-column prop="competition_status_name" label="比赛状态"></el-table-column>

          <el-table-column prop="software" label="参赛软件"></el-table-column>
          <el-table-column prop="date" label="赛事时间">
            <template slot-scope="scope">
              {{scope.row.match_time_start}}-{{scope.row.match_time_end}}
            </template>
          </el-table-column>
          <el-table-column prop="date" label="报名时间">
            <template slot-scope="scope">
              {{scope.row.sign_up_time_start}}-{{scope.row.sign_up_time_end}}
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="bianji(scope.row)" type="text">编辑</el-button>
              <el-button @click="shanchu(scope.row)" type="text">删除</el-button>
              <el-button @click="chakan(scope.row)" type="text">查看报名信息</el-button>
              <el-button @click="chakanchengji(scope.row)" type="text">查看成绩</el-button>
            </template>
          </el-table-column>
      </el-table>

      <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
    </div>
    <el-dialog  title="比赛管理"  :visible.sync="log"  width="1200px" :close-on-click-modal="false" :close-on-press-escape="false">

      <div style="padding: 5px 10px;" class="flexc">
        <div style="width: 180px; text-align: right; margin-right: 30px;">赛事名称：</div>
        <el-input v-model="all.name" style="width: 250px; " placeholder="请输入比赛名称"></el-input>

        <el-checkbox v-model="all.is_top" :true-label="1" :false-label="0" style="margin-left: 20px;">置顶</el-checkbox>
      </div>

      <div style="padding: 5px 10px;" class="flexc">
         <div style="width: 180px; text-align: right; margin-right: 30px;">价格：</div>
         <el-input v-model="all.price" style="width: 250px; " placeholder="请输入价格"></el-input>
      </div>

      <div style="padding: 5px 10px;" class="flexc">
         <div style="width: 180px; text-align: right; margin-right: 30px;">组别：</div>
         <el-select v-model="all.type" multiple style="width: 250px;" placeholder="请选择组别">
             <el-option label="初中生组" value="1"></el-option>
             <el-option label="高中生组" value="2"></el-option>
             <el-option label="高职生组" value="3"></el-option>
             <el-option label="大学生组" value="4"></el-option>
             <el-option label="成人组" value="5"></el-option>
             <el-option label="小学组" value="6"></el-option>
             <el-option label="学生组" value="7"></el-option>
         </el-select>
      </div>

      <div style="padding: 5px 10px;" class="flexc">
         <div style="width: 180px; text-align: right; margin-right: 30px;">赛事类型：</div>
         <el-select v-model="all.match_type" style="width: 250px;" placeholder="请选择赛事类型">
             <el-option label="个人赛" :value="0"></el-option>
             <el-option label="团队赛" :value="1"></el-option>
         </el-select>
      </div>

      <div style="padding: 5px 10px;" class="flexc">
        <div style="width: 180px; text-align: right; margin-right: 30px;">赛事宣传图：</div>
        <div><chuantu @getimgid="getimgid3" :imgid="all.cover_url" v-if="relo" :zi="'上传照片'" style="width: 200px; height: 200px;"></chuantu></div>
      </div>

      <div style="padding: 5px 10px;" class="flexc">
        <div style="width: 180px; text-align: right; margin-right: 30px;">地区：</div>
        <diqu :cengshu="3" :sheng="all.province" :shi="all.city" :qu="all.district" :w="'300px'" @chuandizhi="chuandizhi" v-if="relo"></diqu>
      </div>

      <div style="padding: 5px 10px;" class="flexc">
        <div style="width: 180px; text-align: right; margin-right: 30px;">参赛软件：</div>
        <el-input v-model="all.software" style="width: 250px; " placeholder="请输入参赛软件"></el-input>
      </div>

      <div style="padding: 5px 10px;" class="flexc"><div style="width: 180px; text-align: right; margin-right: 30px;">赛事时间:</div>

        <el-date-picker v-model="all.match_time_start" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="赛事开始时间"></el-date-picker>
        <span style="margin: 0 20px;">—</span>
        <el-date-picker v-model="all.match_time_end" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="赛事结束时间"></el-date-picker>

        <!-- <el-date-picker style="width: 400px; margin-right: 20px;" v-model="times1" @change="timechange1"	clearable value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"	range-separator="——" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker> -->
      </div>

      <div style="padding: 5px 10px;" class="flexc"><div style="width: 180px; text-align: right; margin-right: 30px;">报名时间:</div>
        <el-date-picker v-model="all.sign_up_time_start" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="报名开始时间"></el-date-picker>
        <span style="margin: 0 20px;">—</span>
        <el-date-picker v-model="all.sign_up_time_end" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="报名结束时间"></el-date-picker>
        <!-- <el-date-picker style="width: 400px; margin-right: 20px;" v-model="times2" @change="timechange2"	clearable value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"	range-separator="——" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker> -->
      </div>

      <div style="padding: 5px 10px;" class="flexc">
        <div style="width: 180px; text-align: right; margin-right: 30px;">赛事章程：</div>
        <fuwenben2 :content="all.event_regulations" @getcontent="getcontent1" style="width: 900px;" v-if="relo"></fuwenben2>
      </div>

      <div style="padding: 5px 10px;" class="flexc">
        <div style="width: 180px; text-align: right; margin-right: 30px;">软件教程：</div>
        <fuwenben :content="all.software_tutorials" @getcontent="getcontent2" style="width: 900px;" v-if="relo"></fuwenben>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" round @click='fabu'>发布比赛</el-button>
      </div>

    </el-dialog>


	</div>
</template>

<script>
  import diqu from '../../components/zidongshengchanguanli.vue'
  import chuantu from '../../components/chuantu.vue'
  import fuwenben from '../../components/fuwenben.vue'
  import fuwenben2 from '../../components/fuwenben2.vue'
  import left from '../left.vue'
	export default {
		name: 'bisai',
    components:{
      left,chuantu,fuwenben,fuwenben2,diqu
    },
		data() {
			return {
        tableData:[],
        search:{
          page:1,
          page_size:20,
          name:""
        },
        total:0,
        log:false,
        all:{
          id:"",
          name:"",
          price:"",
          type:[],//组别 0 初中组 1高中组 2高职组 3大学组 默认 初中组
          cover_url:"",//赛事宣传图
          province:"",
          city:"",
          district:"",
          software:"",
          match_time_start:"",
          match_time_end:"",//赛事结束时间
          sign_up_time_start:"",
          sign_up_time_end:"",// 报名结束时间
          event_regulations:"",
          software_tutorials:"",//软件教程
          match_type:0,
          is_top:0
        },
        relo:true,
        times1:[],
        times2:[]
			}
		},
		created() {
      this.getlist()

		},
		mounted() {

		},
		methods: {
      chakanchengji:function(item){
        this.$router.push('/bisai/chengji?id='+item.id+'&name='+item.name)
      },
      chakan:function(item){
        this.$router.push('/bisai/mingdan?id='+item.id+'&name='+item.name)
      },
      shanchu:function(item){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post(this.IP_URL+'/admin/competition/del',{id:item.id}).then((response)=>{
          	if (response.data.msg.code == 0) {
          		this.$message.success('操作成功');
              this.getlist()
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        })
      },
      chuandizhi:function(val){
        this.all.province = val.sheng
        this.all.city = val.shi
        this.all.district = val.qu
      },
      fabu:function(){
        axios.post(this.IP_URL+'/admin/competition/save',this.all).then((response)=>{
        	if (response.data.msg.code == 0) {
        		this.$message.success('操作成功');
            this.log = false
            this.getlist()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      timechange1: function (val) {
        if (this.times1 == null) {
          this.all.match_time_start = "";
          this.all.match_time_end = "";
        } else {
          this.all.match_time_start = this.times1[0];
          this.all.match_time_end = this.times1[1];
        }
      },
      timechange2: function (val) {
        if (this.times2 == null) {
          this.all.sign_up_time_start = "";
          this.all.sign_up_time_end = "";
        } else {
          this.all.sign_up_time_start = this.times2[0];
          this.all.sign_up_time_end = this.times2[1];
        }
      },
      getcontent1:function(val){
        this.all.event_regulations = val
      },
      getcontent2:function(val){
        this.all.software_tutorials = val
      },
      getimgid3:function(val){
        this.all.cover_url = val
      },
      bianji:function(item){
        axios.get(this.IP_URL+'/admin/competition/info?id='+item.id).then((response)=>{
        	if (response.data.msg.code == 0) {
        		this.all = JSON.parse(JSON.stringify(response.data.data))
            this.times1 = [response.data.data.match_time_start,response.data.data.match_time_end]
            this.times2 = [response.data.data.sign_up_time_start,response.data.data.sign_up_time_end]
            this.relo = false
            this.$nextTick(()=>{
              this.relo = true
            })
            this.log = true
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      add:function(){
        this.all = {
          id:"",
          name:"",
          price:"",
          type:[],//组别 0 初中组 1高中组 2高职组 3大学组 默认 初中组
          cover_url:"",//赛事宣传图
          province:"",
          city:"",
          district:"",
          software:"",
          match_time_start:"",
          match_time_end:"",//赛事结束时间
          sign_up_time_start:"",
          sign_up_time_end:"",// 报名结束时间
          event_regulations:"",
          software_tutorials:"",//软件教程
          match_type:0,
          is_top:0
        }
        this.times1 = []
        this.times2 = []
        this.relo = false
        this.$nextTick(()=>{
          this.relo = true
        })
        this.log = true
      },
      getlist:function(){
        axios.get(this.IP_URL+'/admin/competition/list',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
        		this.tableData = response.data.data.data
            this.total = response.data.data.total
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      fanye:function(val){
        this.search.page = val
        this.getlist()
      },
		}
	}
</script>


<style scoped >

</style>
